<template>
  <h1 @click="changeCount">article.shareCount = <span v-text="article.shareCount"></span></h1>
  <h1 @click="change">ref shareCount = <span v-text="shareCount"></span></h1>
  <h1 @click="changeToRef">toRefCount = <span v-text="toRefCount"></span></h1>
</template>

<script>


import {ref, toRef} from "vue";

export default {
  name: "LhzA",
  setup() {
    const article = {
      shareCount: 0
    };
    const changeCount = function () {
      article.shareCount++;
      console.log(article.shareCount);
    };
    const shareCount = ref(article.shareCount);
    const change = function () {
      this.shareCount++;
    }
    // toRef和传入的数据形成引用关系，修改toRef会影响之的数据，但是不会更新UI
    // ref是单纯的复制,不影响之前复制的数据，取决于复制的数据类型，但是会更新UI
    // ref 数据会引起监听行为，而 toRef 不会
    const toRefCount = toRef(article, 'shareCount');
    const changeToRef = function () {
      toRefCount.value++;
      console.log(toRefCount.value);
    }
    return {
      article, shareCount, change, toRefCount, changeToRef, changeCount
    };
  }
}
</script>

<style scoped>

</style>